<template>
    <a-modal :visible="visible" :title="title"
             @ok="onOk" @cancel="onCancel">
        <a-form>
            <a-form-item label="编号" v-if="id">
                <a-input readonly v-model:value="id"></a-input>
            </a-form-item>
            <a-form-item label="姓名">
                <a-input v-model:value="dto.name"></a-input>
            </a-form-item>
            <a-form-item label="性别">
                <a-radio-group v-model:value="dto.sex">
                    <a-radio-button value="男">男</a-radio-button>
                    <a-radio-button value="女">女</a-radio-button>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="年龄">
                <a-input-number v-model:value="dto.age"></a-input-number>
            </a-form-item>
        </a-form>
    </a-modal>

</template>

<script setup lang="ts">
import axios from "../api/request";
import {ref, computed} from "vue";
import {useRequest} from "vue-request";
import {StudentSaveDto, AxiosRespString} from "../model/Model8080";
import {Form} from 'ant-design-vue'

const props = defineProps<{ id: number, dto: StudentSaveDto, visible: boolean }>()
const title = computed(() => props.id === 0 ? '新增学生' : '删除学生');


const emit = defineEmits(['update:visible', 'saved']);

async function onOk() {
    if (props.id === 0) {
        await insert(props.dto)
    } else {
        await update(props.dto)
    }
    emit('saved')
    emit('update:visible', false)
}

function onCancel() {
    emit('update:visible', false)
}

const {runAsync: update} = useRequest<AxiosRespString, StudentSaveDto[]>((dto) =>
    axios.put(`api/students/${props.id}`, dto), {
    manual: true
});

const {runAsync: insert} = useRequest<AxiosRespString, StudentSaveDto[]>(
    (dto) => axios.post('/api/students', dto),
    {
        manual: true
    }
)
</script>

<style scoped>

</style>
